
<template>
  <div>
    <Header />
    <div class="back">
      <div class="container">
        <Nested :list='nestedList' />
        <div class="flex">
          <UserLeft class="left" @select="select" />
          <UserInformation v-if="active === '1'" />
          <StudentInformation v-if="active === '2'" />
          <PreferencesList v-if="active === '3'" />
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script lang="ts" setup>
import { mapState } from 'ssr-hoc-vue3'
import { IndexData } from '~/typings/data'
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue'
import Nested from '@/components/nested/index.vue'
import UserLeft from '@/components/user/userLeft/index.vue'
import UserInformation from '@/components/user/userInformation/index.vue'
import StudentInformation from '@/components/user/studentInformation/index.vue'
import PreferencesList from '@/components/user/preferencesList/index.vue'
import { NestedType } from '@/components/nested/nested';
import { ref } from 'vue'

const indexData = mapState<IndexData>().indexStore.value.data
const nestedList = ref<NestedType[]>([{ name: '首页', path: '/' }, { name: '我的资料', path: '/user' }])
const active = ref<string>("1");
const select = (type: string) => {
  active.value = type;
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
